<!-- 公共组件-卡片信息 -->
<template>
	<view class="card-body" :style="props.cardBodyStyle">
		<!-- 顶部按钮 -->
		<view 
			v-if="props.hasBtn"
			class="btn" 
			@tap="onTopClick"
			:style="{backgroundImage: props.enrollState?data.bgColor2:data.bgColor1}">
			<span v-if="props.topBtnTxt == ''">{{ props.enrollState?'已报名，可前往我的报名查看结果':'一键报名' }}</span>
			<span v-else>{{ props.topBtnTxt }}</span>
		</view>
		<!-- 操作栏 -->
		<view class="title flex-bothends">
			<view class="text flex-bothends">
				{{ data.info.title }}
				<view class="level" v-if="props.hasEnrollType">{{ props.enrollType }}</view>
			</view>
			<view class="flex-bothends">
				<!-- 信息修改 -->
				<view class="text-gray" v-if="props.hashandleBtn">
					<span v-if="data.info.disabled">{{ props.prefix }}</span>
					<view class="opration" @tap="onHandleEdit" v-if="props.handleType==='edit'">{{ data.info.disabled?data.info.operationDesc:'返回' }}</view>
					<view class="opration" @tap="onHandleOther" v-if="props.handleType==='other'">{{ data.info.operationDesc }}</view>
				</view>
				<!-- 脱敏图标 -->
				<tm-icon 
					v-if="data.info.hasPrivacy"
					:name="data.info.doPrivacy?'tmicon-eye':'tmicon-eye-slash'" 
					style="margin: 0 10rpx;" 
					@tap="changePrivacy"
				></tm-icon>
			</view>
		</view>
		<!-- 主体内容插槽 -->
		<slot name="content"></slot>
	</view>
</template>
<script lang="ts" setup>
	import {ref, reactive, onMounted, defineEmits} from "vue";
	
	// ------------------接收传入参数(组件)-------------------
	const emit = defineEmits(['changeEditFlag','changePrivacy']);
	const props = defineProps({
		// 卡片标题
		title: {
			type: String,
			default: '卡片标题'
		},
		// 报名状态
		enrollState: {
			type: Boolean,
			default: false
		},
		// 顶部按钮文字
		topBtnTxt: {
			type: String,
			default: ''
		},
		// 是否含有顶部按钮
		hasBtn: {
			type: Boolean,
			default: false
		},
		// 前缀描述
		prefix: {
			type: String,
			default: '若信息有误，可'
		},
		// 操作描述
		operationDesc: {
			type: String,
			default: '申请修改'
		},
		// 是否含操作按钮
		hashandleBtn: {
			type: Boolean,
			default: false
		},
		// 操作类型（eidt:编辑类; other:其他类）
		handleType: {
			type: String,
			default: 'edit'
		},
		// 不可编辑标记
		disabled: {
			type: Boolean,
			default: true
		},
		// 是否含有脱敏图标
		hasPrivacy: {
			type: Boolean,
			default: false
		},
		// 脱敏状态
		doPrivacy: {
			type: Boolean,
			default: true
		},
		// 容器样式
		cardBodyStyle: {
			type: String,
			default: ''
		},
		// 是否含有报名类别
		hasEnrollType: {
			type: Boolean,
			default: false
		},
		// 报名类别
		enrollType: {
			type: String,
			default: ''
		}
	})
	// ------------------钩子函数----------------------------
	// 初始化
	onMounted(() => {
		
	})
	
	// ------------------变量区------------------------------
	// 主数据
	const data = reactive({
		// 页面可操作数据
		info: {} as any,
		// 一键报名背景色
		bgColor1: 'linear-gradient(to right, #adc6ff, #2f54eb)',
		// 已报名背景色
		bgColor2: 'linear-gradient(to right, #d3adf7, #722ed1)',
	})
	// -------页面初始操作(时间为创建实例前, 即beforeCreate)-------
	data.info = {...props};
	// console.log(data.info);

	// ------------------方法区------------------------------
	// 编辑状态切换 
	const onHandleEdit = () => {
		data.info.disabled = !data.info.disabled;
		emit('changeEditFlag', data.info.disabled);
	}
	// 其他类操作
	const onHandleOther = () => {
		console.log("其他类操作");
	}
	// 切换并获取脱敏/正常数据
	const changePrivacy = () => {
		data.info.doPrivacy = !data.info.doPrivacy;
		emit('changePrivacy', data.info.doPrivacy);
	}
	// 顶部按钮点击的回调
	const onTopClick = () => {
		emit('onTopClick');
	}
</script>
<style lang="scss" scoped>
	.card-body {
		// width: 644rpx;
		margin: 24rpx 12rpx;
		padding: 20rpx;
		font-family: '阿里巴巴普惠体';
		background-color: #ffffff;
		border-radius: 12rpx;
		
		.btn {
			width: 100%;
			height: 80rpx;
			margin-bottom: 20rpx;
			color: #ffffff;
			text-align: center;
			line-height: 80rpx;
			font-weight: 600;
			border-radius: 16rpx 16rpx 0 0;
		}
		
		.title {
			// width: 624rpx;
			height: 50rpx;
			padding: 0 0 0 20rpx;
			border-left: 6rpx solid #2f54eb;
			
			.level {
				width: 50rpx;
				height: 50rpx;
				margin: 0 10rpx;
				font-size: 26rpx;
				text-align: center;
				line-height: 50rpx;
				border-radius: 16rpx;
				background-color: #EDF2FF;
			}
			
			.text {
				font-size: 36rpx;
				font-weight: 600;
			}
			
			.text-gray {
				font-size: 24rpx;
				color: #A0A7B1;
			}
			
			.opration {
				display: inline-block;
				padding: 6rpx 10rpx;
				margin-left: 8rpx;
				color: #E5EFFF;
				text-align: center;
				line-height: 32rpx;
				background-image: linear-gradient(to right, #597ef7, #2f54eb);
				box-shadow: rgb(0 98 255 / 20%) 0px 2px 6px;
				border-radius: 8rpx;
			}
		}
	}
</style>